<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Component Example 3: Template and Slots</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1>使用 Template 和 Slot 的自定义元素</h1>

    <!-- 这是一个简单的用户卡片组件 -->
    <user-card>
        <h2>张三</h2>
        <p>一位热爱前端开发的工程师。</p>
        <span slot="tagline">前端大神</span> <!-- 使用具名槽位 -->
    </user-card>

    <user-card>
        <h2>李四</h2>
        <p>专注于后端技术，但也懂点前端。</p>
        <p>他的座右铭是：代码改变世界。</p>
    </user-card>

    <user-card>
        <p>王五</p> <!-- 即使不是 h2，也会被默认槽位接收 -->
        <p>神秘人物，没有更多信息。</p>
        <span slot="tagline">保持神秘</span>
    </user-card>

    <script>
        // 1. 定义模板内容
        const userCardTemplate = document.createElement('template');
        userCardTemplate.innerHTML = `
            <style>
                .card {
                    border: 1px solid #ccc;
                    border-radius: 8px;
                    padding: 15px;
                    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
                    width: 250px;
                    background-color: #f9f9f9;
                    text-align: center;
                }
                .card h2 {
                    margin-top: 0;
                    color: #333;
                }
                .card p {
                    color: #666;
                    font-size: 0.9em;
                }
                .tagline {
                    display: block;
                    background-color: #e0f7fa;
                    color: #00796b;
                    padding: 5px 10px;
                    border-radius: 4px;
                    margin-top: 10px;
                    font-weight: bold;
                    font-size: 0.8em;
                }
                /* 默认槽位的样式，应用于没有 slot 属性的内容 */
                ::slotted(h2) {
                    color: blue; /* 会覆盖 template 里的 h2 颜色 */
                }
                /* 具名槽位的样式 */
                ::slotted([slot="tagline"]) {
                    font-style: italic;
                    color: #d84315;
                }
            </style>
            <div class="card">
                <!-- 默认槽位：没有指定 slot 属性的内容会放到这里 -->
                <slot></slot>
                <!-- 具名槽位：只有 slot="tagline" 的内容会放到这里 -->
                <p class="tagline">标签：<slot name="tagline">无标签</slot></p>
            </div>
        `;

        class UserCard extends HTMLElement {
            constructor() {
                super();
                this.attachShadow({ mode: 'open' });
                // 2. 将模板内容克隆到 Shadow DOM 中
                // importNode(node, deep) 方法：导入一个节点到当前文档，deep 为 true 表示深度克隆（包括所有子节点）
                this.shadowRoot.appendChild(userCardTemplate.content.cloneNode(true));
            }

            connectedCallback() {
                console.log('UserCard: 已连接到DOM！');
            }
        }

        customElements.define('user-card', UserCard);
    </script>
</body>
</html>
